<template>
<div class="guahao01">

  <div class="header">
    <i class="iconfont icon-msnui-left-arrow-round" @click="goIndex"></i>
    <span class="span">{{dataer.address}}医院-微医</span>
    <div class="right"></div>
  </div>

  <div class="search">
    <div class="address">{{dataer.address}}<i class="iconfont icon-sanjiao_down_s"></i></div>
    <div class="searcher">
      <i class="iconfont icon-sousuo"></i>
      <span class="span">搜索医院，医生，科室，疾病</span>
    </div>
  </div>

  <div class="hospitals">
    <div v-for="(h,idx) in dataer.hospital" class="hospital" @click="goGuahao02(idx)">
      <img class="img" :src="h.hPic01" alt="">
      <div class="right">
        <p class="top">{{h.hName}}</p>
        <p class="center">预约量{{h.hNum}}</p>
        <p class="bottom">[{{h.hLev}}]</p>
      </div>
    </div>
  </div>
</div>
</template>

<script>
    export default {
        name: 'guahao01',
        data() {
            return {
              dataer:null
            }
        },
      methods:{
          goGuahao02:function(idx){
            this.$router.push(`/guahao02/${idx}`)
          },
          goIndex:function(){
            this.$router.push("/")
        }
      },
      computed:{
          data(){
            return this.$store.state.data
          }
      },
      created:function(){
        this.$store.dispatch('getdata')
        this.dataer=this.$store.state.data
        console.log(this.dataer)
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/css/guahao01.css";
</style>
